<template>
  <div>
    <h2 ref="msg">msg: {{msg}}</h2>
    <h2 ref="msg2">msg2: {{msg2}}</h2>
    <button @click="test">测试</button>
  </div>
</template>

<script>
/* 
什么是Tick:
  取出队列中的一个回调任务到调用栈中执行就是一个tick
  一个事件回调是一个Tick
  一个事件回调后的所有更新DOM操作也是一个Tick
  每次调用nextTick都是将回调函数作为一个异步任务放入到任务队列中, 也就是作为下一下tick
内部用一个数组callbacks存储
  包含一个所有DOM更新的watcher数组: watchers   () => {[watcher, watcher]}
  所有nextTick的回调
如果第一个是更新数据, callbacks的结构是:
  [watchers, nextTick1, nextTick2]
如果第一个是nextTick
  [nextTick1, watchers, nextTick2]
nextTick中用的是哪个异步技术呢?
  简单说: 优先使用微任务 => 宏任务
  详细说: promise => MutationObserver => setImmediate => setTimeout
*/
export default {
  name: 'NextTick',
  data () {
    return {
      msg: 'abc',
      msg2: 'atguigu'
    }
  },

  methods: {
    test () {
      this.msg2 += '++' // 将更新DOM的回调任务放入队列
      this.$nextTick(() => {
        console.log('nextTick', this.$refs.msg.innerHTML)
      })
      this.msg += '--'
      this.$nextTick(() => {
        console.log('nextTick', this.$refs.msg2.innerHTML)
      })
      this.msg2 += '++'
      console.log(this.$refs.msg.innerHTML)  // 直接读取得到是更新前的

      // 动态显示输入框并自动获取焦点
      
    }
  },

  watch: {
    // 监视的回调是在更新数据所有的回调函数执行完成后才调用
    msg (value) { 
     console.log('watch', this.$refs.msg.innerHTML)
    }
  }
}
</script>

<style scoped>

</style>
